<template>
	<view class="login-page">
	<view>
		<view class="login-title">
			手机号码快速登录
		</view>
		
		<form action="">
			<view class="uni-forms-item">
				<input type="text" placeholder="请输入手机号" class="login-input"/>
			</view>
			<view class="uni-forms-item">
				<input type="text" placeholder="请输入验证码" class="login-input"/>
				<text :disabled="isCounting" @click="startCountdown" class="verify-btn">{{ countdownText }}</text>
			</view>
			<button type="default" class="login-btn">登 录</button>
		</form>
		
	</view>
	<view class="agreement">
		登录即代表同意<navigator url="">用户协议</navigator>
	</view>
	<view class="login-other">
		<view class="other-title">其他登录方式</view>
		<view class="other-list">
			<view class="other-item">
				<view class="other-icon"><uni-icons type="weixin" size="30"></uni-icons></view>
				<text>微信</text>
			</view>
			<view class="other-item">
				<view class="other-icon"><uni-icons type="weibo" size="30"></uni-icons></view>
				<text>微博</text>
			</view>
			<view class="other-item">
				<view class="other-icon"><uni-icons type="qq" size="30"></uni-icons></view>
				<text>QQ</text>
			</view>
			
		</view>
	</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const verificationCode = ref('');
const isCounting = ref(false);
const secondsRemaining = ref(60); // 倒计时时间，单位为秒
const countdownText = ref('获取验证码');

const startCountdown = () => {
  if (isCounting.value) return;

  // 模拟发送验证码请求
  console.log('Sending verification code...');
  
  // 开始倒计时
  isCounting.value = true;
  let timer = setInterval(() => {
    secondsRemaining.value -= 1;
    countdownText.value = `${secondsRemaining.value} s `;

    if (secondsRemaining.value <= 0) {
      clearInterval(timer);
      resetCountdown();
    }
  }, 1000);
};

const resetCountdown = () => {
  isCounting.value = false;
  secondsRemaining.value = 60;
  countdownText.value = '再次获取';
};		
</script>

<style>
.login-page{
	padding: 0 60rpx;
}
.login-title{
	margin-top: 100rpx;
	margin-bottom: 100rpx;
	text-align: center;
	font-size: 34rpx;
}
.login-input{
	padding:20rpx 0;
	font-size: 28rpx;
	border-bottom: 4rpx solid #666ee8;
}
.uni-forms-item{
	position:relative;
	margin-bottom: 10rpx;
}
.verify-btn{
	position:absolute;
	top:20rpx;
	right:4rpx;
	font-size:24rpx;
	color:#666ee8;
}
.login-btn{
	margin-top:60rpx;
	color:#fff !important;
	background-color: #666ee8 !important;
	border-radius:100rpx;
}

.agreement{
	margin-top: 35rpx;
    font-size: 24rpx;
    text-align: center;
    color: #ccc;
}
.agreement navigator{
    display: inline;
    color:#666EE8;
    text-decoration:underline;
}
.login-other{
    margin-top: 300rpx;
}
.other-title{
    margin-bottom: 60rpx;
    font-size: 30rpx;
    text-align: center;
}
.other-list{
    display: flex;
    justify-content: space-between;
}
.other-item{
    font-size:26rpx;
    text-align: center;
}
.other-icon{
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 6rpx;
    line-height: 60rpx;
    font-size:36rpx;
    
    border-radius:50%;
}
</style>
